<template>
  <div class="div">
    <div style="height: 10px"></div>
    <div class="form-div" style="height: 600px">
      <el-form
        :disabled="this.$route.query.toDisableTable"
        ref="formName"
        :model="form"
        label-width="100px"
        style="label-width: 120px"
      >
        <el-form-item label="优惠券类型" style="margin-top: 10px">
          <el-select v-model="form.type" style="width: 290px">
            <el-option
              v-for="item in couponType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="优惠券名称"
          prop="name"
          :rules="[
            {
              required: true,
              message: '优惠券名称不能为空',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            v-model.trim="form.name"
            style="width: 290px"
            placeholder="请输入优惠券名称，不超过8个字"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="面值"
          prop="faceValue"
          :rules="[
            {
              required: true,
              message: '面值不能为空',
              trigger: 'change',
            },
            { validator: validatenumber, trigger: 'change' },
          ]"
        >
          <el-input
            v-model.trim="form.faceValue"
            style="width: 290px"
            placeholder="请输入优惠券金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="可用数量"
          prop="userQuantity"
          :rules="[
            {
              required: true,
              message: '可用数量不能为空',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            v-model.trim="form.userQuantity"
            style="width: 290px"
            placeholder="请输入优惠券发放数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="领取方式">
          <el-radio-group v-model="form.sendMethod">
            <el-radio label="1">手动发放</el-radio>
            <el-radio label="2" style="margin-left: 5px">主动领取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期">
          <el-radio-group v-model="form.radio03">
            <el-radio label="1">
              领取当天起
              <el-input
                v-model.trim="form.effectTime"
                style="width: 290px"
                placeholder="请输入有效天数"
              ></el-input>
              天内有效
            </el-radio>

            <el-radio label="2" style="display: block; margin-top: 30px">
              指定有效日期
              <el-date-picker
                v-model="form.timeList"
                type="daterange"
                style="width: 240px"
              ></el-date-picker>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="使用门槛"
          prop="useThreshold"
          :rules="[
            {
              required: true,
              message: '使用门槛不能为空',
              trigger: 'change',
            },
          ]"
        >
          满
          <el-input
            v-model.trim="form.useThreshold"
            style="width: 290px"
            placeholder="请输入优惠券金额"
          ></el-input>
          元可使用
        </el-form-item>
        <el-form-item label="活动叠加">
          <el-switch
            v-model="switchValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="可使用商品">
          <el-radio-group v-model="radio02">
            <el-radio label="1">商城所有商品</el-radio>
            <el-radio label="2" style="margin: 0 5px">指定商品</el-radio>
            <el-radio label="3">指定分类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用说明">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="对优惠券进行补充说明"
            style="width: 300px; height: 90px"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <el-result icon="success"></el-result>
      <div style="margin-top: -10px; font-size: 18px; margin-left: 20%">
        操作成功
      </div>
      <div style="margin-left: 20%; margin-top: 20px">保存成功</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <div style="height: 100px">
      <el-button
        style="width：130px;height:30px"
        @click="cancel"
        v-show="this.showCS"
      >
        取消
      </el-button>
      <el-button
        style="width：130px;height:30px"
        type="primary"
        @click="save('formName')"
        v-show="this.showCS"
      >
        保存
      </el-button>
      <el-button
        style="width：130px;height:30px"
        @click="cancel"
        v-show="this.showB"
      >
        返回
      </el-button>
    </div>
  </div>
</template>
 
<script>
import { add } from '@/api/marketing/couponList'

export default {
  data() {
    return {
      //addForm。
      form: {
        name: '',
        type: 1,
        sendMethod: '1',
        faceValue: null,
        effectTime: null,
        limit: '',
        useThreshold: '',
        userQuantity: null,
        userState: 0,
        cuser: '',
        ctime: null,
        uuser: '',
        utime: null,
        timeList: [], //指定有效日期。
      },
      // showSubmit: false,  //详情-保存按钮的显示与隐藏。
      value: '', //select值。
      dialogVisible: false, //dialog。
      radio01: '2 ', //单选框。
      radio02: '1',
      radio03: '3', //有效期单选框。
      switchValue: true, //开关按钮。

      showCS: true,
      showB: false,
      couponType: [
        {
          value: 1,
          label: '普通卷',
        },
        {
          value: 2,
          label: '新人卷',
        },
      ],
    }
  },
  mounted() {
    if (this.$route.query.flag == 'edit') {
      this.form = this.$route.query.item
      this.showCS = true
      this.showB = false
    } else if (this.$route.query.flag == 'details') {
      this.form = this.$route.query.item
      this.showCS = false
      this.showB = true
    }
  },
  methods: {
    //取消
    async cancel() {
      await this.$router.push('/market/campaign/couponList')
    },
    //表单整数效验
    validatenumber(rule, value, calback) {
      let reg = /^[1-9]([0-9])*$/
      let flag = reg.test(value)
      if (!flag) {
        calback(new Error('面值必须为正整数'))
      } else {
        calback()
      }
    },
    async EditSubmit() {
      this.$router.push('/market/campaign/couponList')
      // this.$message.success('添加成功!')
    },
    //表单提交验证。
    async save(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogVisible = true
          const res = await add(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
 
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.div {
  .form-div {
    .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--small {
      margin-top: -10px;
    }
  }
  button.el-button.el-button--default.el-button--small {
    width: 56px;
    height: 35px;
    margin-left: 100px;
  }
  button.el-button.el-button--primary.el-button--small {
    width: 56px;
    height: 35px;
  }
}
::v-deep svg.icon-success {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 10%;
  top: 20%;
}
</style>